<template>
	<view>
		<u-navbar leftText="筛选" title="发现" @leftClick="BackPage" @rightClick="rightClick"
			:fixed="true" :placeholder="true" rightText="发布内容">
			<view class="flex align-center" slot="left">
				<text class="margin-right-xs text-lg">筛选</text>
				<u-icon name="arrow-down-fill" color="#666" size="20rpx"></u-icon>
			</view>
		</u-navbar>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="bg-white margin-top" v-for="(item,index) in 3" :key="index">
				<view class="padding">
					<view class="flex flex-between margin-top">
						<view class="flex flex-sub align-center">
							<u--image :showLoading="true" radius="10rpx"
								:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="120rpx"
								height="120rpx">
							</u--image>

							<view class="margin-left-sm">
								<view class="flex">
									<view class="text-cut text-lg">
										史密夫
									</view>
									<view class="margin-left-xs text-gray">
										主任教师
									</view>
									<view
										class="recommend-tap2 text-white text-sm flex align-center justify-center margin-left-sm">
										官方推荐
									</view>
								</view>

								<view class="margin-top-sm">
									小学·生物 | 天津
								</view>
							</view>
						</view>
						<view class="" style="flex: 0 0 150rpx">
							<u-button color="#ea3457" plain type="primary" shape="circle" text="关注"
								:customStyle="{width:'120rpx', height: '66rpx'}">
							</u-button>
						</view>
					</view>

					<view class="margin-top-sm flex align-center">
						<view style="flex: 0 0 120rpx">
							<u-button color="#999" plain type="primary" shape="circle" text="独立老师" size="mini"
								:customStyle="{width:'120rpx', height: '46rpx'}">
							</u-button>
						</view>

						<view class="margin-left-sm text-gray">
							评分：5.0分 | 教龄：6年 | 粉丝：357人
						</view>
					</view>

					<view class="margin-top-sm">
						母爱是黑夜中的启明星，为我们照亮前进的道路;母爱是沙漠中的小溪流，为我们解除难耐的饥渴；母爱是机车中的汽油，为我们带给前进的动力
					</view>
					<view class="padding-tb solid-bottom">
						<u--image :showLoading="true" radius="10rpx"
							:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="400rpx"
							height="400rpx">
						</u--image>
					</view>

					<view class="flex text-gray text-center padding-top">
						<view class="flex-sub solid-right">
							阅读 2024
						</view>
						<view class="flex-sub solid-right">
							点赞 0
						</view>
						<view class="flex-sub solid-right">
							转发 5
						</view>
						<view class="flex-sub">
							评论 10
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无内容 -->
			<u-empty v-if="false" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</mescroll-body>
		
		<!-- 筛选弹窗 -->
		<u-popup :show="screenShow" @close="screenClose" mode="right" safeAreaInsetTop>
			<view class="padding-tb padding-left flex flex-direction" style="width: 550rpx; min-height: 100vh;">
				<view style="flex: auto">
					<view class="margin-top-lg">
						<text class="text-lg text-bold">考过科目</text>
						（多选）
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in kmList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>
		
					<view class="margin-top-lg">
						<text class="text-lg text-bold">学段</text>
						（多选）
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in xdList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>
		
					<view class="margin-top-lg">
						<text class="text-lg text-bold">排列方式</text>
						（单选）
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in plList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="plIndex == index ? plIndex = null : plIndex = index"
								:plain="plIndex == index" type="primary" :text="item.name"
								:color="plIndex == index ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: plIndex == index ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>
				</view>
		
		
				<view class="flex-shrink flex padding-right">
					<u-button @click="resetting" color="#f8f8f8" type="primary" text="重置":customStyle="{color: '#666'}">
					</u-button>
					
					<u-button @click="submit" class="margin-left" color="#ea3457" type="primary" text="确定">
					</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 上拉加载的配置(可选)
				upOption: {
					use: true, //是否启用上拉加载
				},
				//筛选
				screenShow: false, //是否显示
				//考过科目
				kmIndex: [],
				kmList: [{
						name: '语文',
						isSelect: false
					},
					{
						name: '数学',
						isSelect: false
					},
					{
						name: '英语',
						isSelect: false
					},
					{
						name: '物理',
						isSelect: false
					},
					{
						name: '化学',
						isSelect: false
					},
					{
						name: '生物',
						isSelect: false
					},
					{
						name: '政治',
						isSelect: false
					},
					{
						name: '历史',
						isSelect: false
					},
					{
						name: '地理',
						isSelect: false
					}
				],
				
				//学段
				xdIndex: [],
				xdList: [{
						name: '高中',
						isSelect: false
					},
					{
						name: '初中',
						isSelect: false
					},
					{
						name: '小学',
						isSelect: false
					}
				],
				//排列方式
				plIndex: 0,
				plList: [{
						name: '按距离'
					},
					{
						name: '按人气'
					},
					{
						name: '按活跃度'
					}
				]
			}
		},
		onShow() {

		},
		methods: {
			//筛选弹窗
			BackPage() {
				this.screenShow = true
			},
			//关闭筛选弹窗
			screenClose() {
				this.screenShow = false
			},
			
			// 重置
			resetting(){
				this.plIndex = 0
				this.kmList.forEach(item=>{
					item.isSelect = false
				})
				this.xdList.forEach(item=>{
					item.isSelect = false
				})
			},
			
			//确认搜索
			submit(){
				this.screenClose()
			},
			
			//点击导航右边
			rightClick() {
				this.$routerGo('/pages/find/publish')
			},
			
			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
